<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>MBCLA Unity Apps</title>
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
    <style type="text/css">
    body {
    	background-color: #D8D8D8;
    	font-family: Calibri;
    	font-size: 16px;
    }
    select {
    	width: 80px;
    	border:1px solid #CCCCCC;
    }
    input {
    	font-family: Calibri;
    	border: 1px solid #989898;
    }
    textarea {
    	font-family: Calibri;
    	border: 1px solid #989898;
    }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="js/jscripts/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
    function disableBtn(id) {
    	$(id).val('Processing...');
    	$(id).attr('disabled', 'disabled');
    }
    function enableBtn(id, value) {
    	$(id).val(value);
    	$(id).removeAttr('disabled');
    }
    
    $(document).ready(function(){
    	$('#mailAppContent').hide();
    	$('#dialog').dialog({
    		closeOnEscape: false,
    		open: function(event, ui) { $(this).parent().children().children('.ui-dialog-titlebar-close').hide(); }
    	});
    	$('#login').click(function(){
	   		 // alert('ok');
	   		 if($('#username').val() == '') {
	   		 	$('#errMsg').text('Username can not be empty!');
	   			$('#username').focus();
	   			return;
	   	     }
	   		 if($('#password').val() == '') {
	   			$('#errMsg').text('Password can not be empty!');
	   			$('#password').focus();
	   			return;
	   	     }
	   		 
	   		 disableBtn('#login');
	   		 
	   		 var auth = {usr:"",pwd:""};
	   		 auth.usr = $('#username').val();
	   		 auth.pwd = $('#password').val();
	
	       	 $.ajax({
	       		url:"auth",
	       	 	type:"POST",
	       	 	data:auth,
	       	 	error:function(jqXHR, textStatus, errorThrow){
	       			$('#errMsg').html('Error: ' + errorThrow + '.<br/>Message: ' + jqXHR.responseText);
	       			enableBtn('#login','Login');
	       	 	},
	       	 	success: function(data){
	       	 		alert(data);
	       	 		$('#dialog').dialog( "close");
	       	 		$('#mailAppContent').show();
	       	 	}
	       	 });
	   	 });

    	$('#send').click(function(){
	   		 // alert('ok');
	   		 if($('#subject').val() == '') {
		   		 if(!confirm("Are you sure to send the mail without a subject?"))
	   				return;
	   	     }

	   		 if(!confirm("Are you sure to send the mail now?"))
   			 	return;
	   		 
	   		 disableBtn('#send');
	   		 
	   		 var mail = {subject:"",body:"",htmlSpp:""};
	   		 mail.subject = encodeURI($('#subject').val());
	         // Save to let jQuery get content of tinyMCE
	   		 tinyMCE.triggerSave();
	   		 mail.body = $('#body').val();
	   		 // alert($('#htmlSpp').attr('checked'));
	   		 mail.htmlSpp = $('#htmlSpp').attr('checked')?'1':'0';
	
	       	 $.ajax({
	       		url:"widget/mail",
	       	 	type:"POST",
	       	 	data:mail,
	       	 	contentType:"application/x-www-form-urlencoded; charset=UTF-8",
	       	 	error:function(jqXHR, textStatus, errorThrow){
	       			$('#mailErrMsg').html('Error: ' + errorThrow + '.<br/>Message: ' + jqXHR.responseText);
	       			enableBtn('#send','Send');
	       	 	},
	       	 	success: function(data){
	       	 		alert(data);
		       	 	$('#subject').val('');
		       	 	tinyMCE.get('body').setContent('');
			       	enableBtn('#send','Send');
	       	 	}
	       	 });
	   	 });

    	tinyMCE.init({
    		// General options
            mode : "textareas",
            theme : "advanced",
            plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

            // Theme options : save,newdocument,|,
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,

            // Skin options
            skin : "o2k7",
            skin_variant : "silver",
    	});
    });
    </script>
  </head>
  <body>
  	<div id="dialog" title="Login Dialog" style="font-size:14px;">
  		<table style="width:100%;text-align:center;">
  			<tr><td align="right">Username:</td><td><input type="text" id="username" name="username" style="width:150px;" /> </td></tr>
  			<tr><td align="right">Password:</td><td><input type="password" id="password" name="password" style="width:150px;" /></td></tr>
  			<tr><td colspan="2" align="center"><input type="button" id="login" name="login" value="Login" style="width:100px;" /></td></tr>
  			<tr><td colspan="2"><div id="errMsg" style="color:red;font-family:Tahoma;font-size:12px;"></div></td></tr>
  		</table>
	</div>
	<div id="mailAppContent">
    <h1>MBCLA Unity Mail App</h1>
    <table>
      <tbody>
	      <tr>
	        <td align="right" valign="top">Mail Subject:</td>
	        <td align="left" valign="top"><input type="text" id="subject" name="subject" style="width:650px;height:16px;" /></td>   
	      </tr>
      	  <tr>
      	  	<td align="right" valign="top">Mail Content:</td>
      	  	<td align="left" valign="top"><textarea id="body" name="body" style="width:650px;height:300px;"></textarea></td>
      	  </tr>
      	  <tr>
      	  	<td align="right" valign="top"></td>
      	  	<td align="left" valign="top"><input type="checkbox" id="htmlSpp" name="htmlSpp" checked="checked" /> HTML Support</td>
      	  </tr>
	      <tr>
	      	<td colspan="2">
	      		<input type="button" id="send" name="send" value="Send" style="width:100px;" />
	      	</td>
	      </tr>
	      <tr><td colspan="2"><div id="mailErrMsg" style="color:red;font-family:Tahoma;font-size:12px;"></div></td></tr>
      </tbody>
    </table>
    </div>
  </body>
</html>
